<template>
    <div id="app">
        <button class="cell-button" @click="refresh">刷新</button>
        <div v-for="(item, index) in data" :key="index" class="row">
            <h1>{{ item.warehouse_name }}</h1>
            <div class="cell-container">
                <div v-for="(cell, cellIndex) in item.data" :key="cellIndex" class="cell-wrapper">
                    <div class="cell" :class="{'ready-green': cell.ready === 1}"
                        @click="handleClick(cell)"
                        :style="{ width: cellWidth + 'px', height: cellWidth + 'px' }">
                        {{ cell.cell_code }}
                    </div>
                    <button class="cell-button" @click="handleButtonClick(cell)"
                        v-if="cell.ready">呼叫货架</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { postAction, getAction } from '../../api/manage'

export default {
    name: "ConnectionPosition",
    data() {
        return {
            description: '接驳位页面',
            url: {
                getConnection: '/basicWarehouse/basicWarehouse/getConnection',
                refresh: '/basicWarehouse/basicWarehouse/refresh',
            },
            data: [],
            cellSize: 200 // 设置正方形 div 的大小为 200px
        }
    },
    computed: {
        cellWidth() {
            return this.cellSize;
        }
    },
    created() {
        this.getConnection()
    },
    methods: {
        refresh() {
            postAction(this.url.refresh, this.data).then((res) => {
                if (res.success) {
                    this.data = res.result
                } else {
                    this.$message.warning(res.message)
                }
            })
        },
        handleClick(cell) {
            this.$emit('clickCell', cell)
        },
        handleButtonClick(cell) {
            this.$emit('clickButton', cell)
        },
        getConnection() {
            getAction(this.url.getConnection).then((res) => {
                if (res.success) {
                    console.log(res.result)
                    this.data = res.result
                } else {
                    this.$message.warning(res.message)
                }
            })
        },
    }
}
</script>
<style scoped>
.row {
    margin-bottom: 10px;
}

.cell-container {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: flex-start; /* 垂直顶部对齐 */
    flex-wrap: wrap; /* 允许换行 */
}

.cell-wrapper {
    position: relative;
    margin-right: 36px; /* 单元格之间的距离改为 36px */
    margin-bottom: 20px; /* 行与行之间的间距 */
    cursor: pointer;
}

.cell-wrapper:last-child {
    margin-right: 0; /* 最后一个单元格不加右边距 */
}

.cell {
    background-color: gray;
    text-align: center;
    color: white;
    line-height: 200px; /* 根据 cellSize 调整 */
    width: 200px; /* 确保宽度固定 */
    height: 200px; /* 确保高度固定 */
}

.cell.ready-green {
    background-color: green;
}

.cell-button {
    padding: 5px 10px;
    font-size: 14px;
    border: none;
    background-color: #4caf50;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
    display: block; /* 确保按钮独占一行 */
    margin-left: auto; /* 居中按钮 */
    margin-right: auto; /* 居中按钮 */
    margin-top: 10px; /* 按钮和灰色 div 之间的间隔 */
}

.cell-button:hover {
    background-color: #45a049;
}
</style>